<template>
  <div id="overview-world-map-wrapper">
    <Drawer></Drawer>
    <div id="overview-world-map"></div>
  </div>
</template>

<script>
import options from './WorldMapOptions';
import Drawer from "./Drawer";
export default {
  name: 'WorldMap',
  components: {Drawer},
  data() {
    return {
      WORLD: {},
      mapObj: {},
      loading: true,
      doneLoading1: false,
      doneLoading2: false,
    }
  },
  watch: {
    doneLoading2: {
      handler(n) {
        if(n) {
          if(this.loading && this.doneLoading1) {
            console.log(options.WorldMapOption);
            this.mapObj.setOption(options.WorldMapOption);
            this.mapObj.hideLoading();
            this.loading = false;
          }
        }
      },
      immediate: true,
    },
    doneLoading1: {
      handler(n) {
        if(n) {
          if(this.loading && this.doneLoading2) {
            console.log(options.WorldMapOption);
            this.mapObj.setOption(options.WorldMapOption);
            this.mapObj.hideLoading();
            this.loading = false;
          }
        }
      },
      immediate: true,
    }
  },
  mounted(){
    let that = this;
    //load world.json
    this.$api.local.worldMap().then(res => {
      that.WORLD = res;
      //register world.json
      that.$echarts.registerMap('WORLD', this.WORLD);
      //draw the world map
      that.drawMap();
      that.mapObj.showLoading('default',options.WorldMapLoading);
      this.loading = true;
      this.doneLoading1 = false;
      this.doneLoading2 = false;
      that.pinMap();
      that.paintMap();
    })
  },
  methods: {
    drawMap(){
      let chartDom = document.getElementById('overview-world-map');
      this.mapObj = this.$echarts.init(chartDom);
      this.mapObj.setOption(options.WorldMapOption);
      //自适应尺寸调整
      window.addEventListener("resize", () => {
        this.mapObj.resize();
      })
      //监听点击事件
      this.mapObj.on('click', (params) => {
        this.$emit('clickCountry',params.name);
      });
    },
    pinMap() {
      this.$api.overview.provincesInfo(0).then((res) => {
        if(res.data === null) {
          options.WorldMapOption.series[0] = options.WorldMapPinSeries;
          this.doneLoading1 = true;
          return;
        }
        for(let i = 0, l = res.data.length; i < l; i++) {
          let province = {};
          province.name = res.data[i].province ? res.data[i].province : res.data[i].country;
          province.value = options.lonlatToXY(Number(res.data[i].coordinates.longitude), Number(res.data[i].coordinates.latitude))
              .concat(Math.ceil(Math.log(res.data[i].timeline.cases[0] - res.data[i].timeline.recovered[0] - res.data[i].timeline.deaths)));
          options.WorldMapPinSeries.data.push(province);
        }
        options.WorldMapOption.series[0] = options.WorldMapPinSeries;
        let myDate = new Date();
        options.WorldMapOption.title.subtext += () => {
          let out = res.data[0].basedate ? res.data[0].basedate : myDate.getMonth() + '月' + myDate.getDate() + '日';
          console.log(out);
          return out;
        }
        this.doneLoading1 = true;
      }).catch((err) => {
        this.$Message.error('获取省份数据失败 ' + err);
        this.doneLoading1 = true;
      })
    },
    paintMap(){
      this.$api.overview.countriesInfo().then((res) => {
        let max = 0;
        for(let i = 0, l = res.data.length; i < l; i++) {
          let country = {};
          if(res.data[i].countryInfo.iso3 === 'ESH') continue; //中国不承认西撒哈拉
          country.name = this.$NameToIso3Mapper.get(res.data[i].countryInfo.iso3);
          country.value = res.data[i].active;
          max = Math.max(country.value, max);
          options.WorldMapAreaSeries.data.push(country);
        }
        console.log(options.WorldMapAreaSeries);
        options.WorldMapOption.series[1] = options.WorldMapAreaSeries;
        options.WorldMapOption.visualMap.max = max;
        let myDate = new Date();
        options.WorldMapOption.title.subtext = '数据更新日期  ' + (myDate.getMonth() + 1) + '月' + myDate.getDate() + '日'; //TODO 注意 这个是假的
        this.doneLoading2 = true;
      }).catch((err) => {
        this.$Message.error('获取国家数据失败 ' + err);
        this.doneLoading2 = true;
      })
    }
  }
}
</script>

<style scoped>
#overview-world-map{
  width: 100%;
  height: 100%;
  background: transparent;
}
</style>